<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
        }
        
        td {
            border: 1px solid black;
            height: 20px;
            position: relative;
            top: 0;
            left: 0;
        }
        
        .input {
            width: 100%;
            height: 22px;
            position: absolute;
            top: -1px;
            left: -1px;
        }
        
        .image {
            margin: 0 auto;
            position: relative;
            float: left;
        }
        
        p {
            width: 100px;
            height: 100px;
            line-height: 100px;
            opacity: 0;
            border: 1px solid black;
            border-radius: 5px;
            background-color: yellow;
            position: absolute;
        }
        
        .p1 {
            left: 45px;
        }
    </style>
    <script src="jquery-3.2.1.js"></script>
    <script>
        $(function() {

            var img1 = $(".img1");
            var p1 = $(".p1");
            img1.hover(function(e) {
                p1.css("opacity", "1");
            }, function(e) {
                p1.css("opacity", "0");
            });

            var img2 = $(".img2");
            var p2 = $(".p2");
            img2.hover(function(e) {
                p2.css("opacity", "1");
            }, function(e) {
                p2.css("opacity", "0");
            });

            var img3 = $(".img3");
            var p3 = $(".p3");
            img3.hover(function(e) {
                p3.css("opacity", "1");
            }, function(e) {
                p3.css("opacity", "0");
            });

            var img4 = $(".img4");
            var p4 = $(".p4");
            img4.hover(function(e) {
                p4.css("opacity", "1");
            }, function(e) {
                p4.css("opacity", "0");
            });


            var jTbody = $("tbody");
            var jBtnAdd = $(".btn-add");
            jBtnAdd.on("click", function(e) {
                var name = $(".name").val();
                var star = $(".star").val();
                var year = $(".year").val();

                var html = "<tr><td>" + name + "</td><td>" + star + "星" + "</td><td>" + year + "</td><td>" + "<button class='btn-del'>删除</button>" + "</td></tr>";
                var jHtml = $(html);
                jHtml.appendTo(jTbody);

                $("td").on("click", function(e) {
                    var hInput = "<input type='text' class='input'>";
                    var jInput = $(hInput);
                    var td = $(this);
                    td.append(hInput);
                    $(".input").focus();
                    $(".input").on("blur", function(e) {
                        td.text($(".input").val());
                        $(".input").remove();
                    })
                })

                var btnDels = $(".btn-del");
                btnDels.off("click");
                btnDels.on("click", function(e) {
                    var tr = $(this).parents("tr");
                    tr.remove();
                })
            })
        })
    </script>
</head>

<body>
    电影名字:<input type="text" class="name"> 电影星级:
    <input type="text" class="star"> 电影出品年份:
    <input type="text" class="year">
    <button class="btn-add">添加</button>
    <table>
        <thead>
            <tr>
                <th>电影名字</th>
                <th>电影的星级</th>
                <th>电影出品年份</th>
                <th>电影操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <div class="image image1">
        <p class="p1">要挡住你啊啊</p>
        <img src="1.jpg" class="img1" height="300px">
    </div>
    <div class="image image2">
        <p class="p2">索隆是大剑豪</p>
        <img src="2.jpg" class="img2" height="300px">
    </div>
    <div class="image image3">
        <p class="p3">喜欢路飞性格</p>
        <img src="3.jpg" class="img3" height="300px">
    </div>
    <div class="image image4">
        <p class="p4">索隆是大剑豪</p>
        <img src="4.jpg" class="img4" height="300px">
    </div>
</body>

</html>